<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" append-to-body>
        <el-form :model="queryParams" ref="queryForm" inline label-width="80px">
                <el-form-item label="时间" prop="customDate">
                    <el-radio-group v-model="queryParams.customDate" @change="changeCustomDate">
                        <el-radio-button :label="1">今天</el-radio-button>
                        <el-radio-button :label="2">昨天</el-radio-button>
                        <el-radio-button :label="3">近7天</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="日期" prop="date">
                    <el-date-picker v-model="queryParams.date" format="yyyy-MM-dd" type="daterange" placeholder="请选择日期" style="width: 240px"></el-date-picker>
                </el-form-item>
                <el-form-item label="SPU" prop="spu">
                    <el-input v-model.trim="queryParams.spu" placeholder="请输入spu" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="反馈问题">
                    <el-cascader
                        v-model="queryParams.qustion_id"
                        :options="dict.questionList"
                        :props="{ multiple: true, placeholder: '请选择反馈问题' }"
                        clearable
                        :show-all-levels="false"
                        style="width: 90%"
                    ></el-cascader>
                </el-form-item>
                
                <el-form-item label=" ">
                    <el-button type="primary" icon="el-icon-search" @click="getDetail">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        <el-row type="flex" style="margin-top: 20px">
        <el-table v-loading="loading" :data="tableData" border script row-key="rowKey" show-summary :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="SPU编号" prop="spu" min-width="140"></el-table-column>
        <el-table-column label="反馈类型" prop="OrderTotal" min-width="280">
            <template slot-scope="scope">
                {{ `${scope.row.type_name_parent} ${scope.row.type_name ? '--' : ''} ${scope.row.type_name || ''}` }}
            </template>
        </el-table-column>
        <el-table-column label="售后订单数" prop="OrderFeedbackTotal" min-width="140"></el-table-column>
        <el-table-column label="售后率" prop="proportion" min-width="140"></el-table-column>
        <!-- <el-table-column label="售后率" prop="proportion" min-width="140"></el-table-column> -->
    </el-table>
        </el-row>
    </el-dialog>
</template>

<script>
import { queryAfterSalesFeedbackList, getQuestionList } from '@/api/order'
import { parseTime } from '@/utils/quickadmin'
export default {
    name: 'SpuSalesRankingDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            tableData: [],
            chatList: [],
            queryParams: {
                qustion_id: [],
                spu: undefined,
                customDate: 3,
                date: [],
            },
            dict: {
                questionList: [],
            },
        }
    },
    computed: {
        title() {
            return `售后明细`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val) {
                    this.queryParams = Object.assign({}, this.queryParams, val)
                }
            },
            immediate: true,
            deep: true,
        },
        'queryParams.date': {
            handler(val) {
                if (val?.length == 2) {
                    this.queryParams.customDate = 0
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async mounted() {
        try {
            const questionData = await getQuestionList()
            this.dict.questionList = questionData?.data ?? []
        } catch (error) {
            //
            console.log(error)
        }
        this.queryParams.customDate = 3
        this.getDetail()
    },
    methods: {
        changeCustomDate() {
            this.queryParams.date = []
            this.getDetail()
        },
        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm')
            this.getDetail()
        },
        getDetail() {
            this.loading = true
            const qyparams = {
                ...this.pageInfo,
                ...this.queryParams,
            }
            if (qyparams.date?.length == 2) {
                qyparams.date = [parseTime(qyparams.date[0], 'y-m-d'), parseTime(qyparams.date[1], 'y-m-d')]
            }
            if (qyparams.qustion_id.length > 0) {
                qyparams.qustion_id = new Set(qyparams.qustion_id.reduce((prev, curr) => prev.concat(curr), []))
            }
            queryAfterSalesFeedbackList(qyparams)
                .then(response => {
                    this.tableData = response.data.list
                    // this.tableData = response.data.map((item, index) => {
                    //     item.rowKey = `${item.spu}--${index}`
                    //     if (item.children) {
                    //         item.children.map((pre, i) => {
                    //             pre.rowKey = `${item.spu}--${index}--${i}`
                    //         })
                    //     }
                    //     return { ...item }
                    // })
                    // this.total = response.data?.total ?? 0
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>

<style></style>
